<template>
	<view class="record">
		<view class="menuSecond dFlex jAround_aCenter">
			<view :class="['smallMenu',secondMenu == '0'?'active2':'']" @tap.stop='changeSecondMenu(0)'>
				<text>待下单({{notDown}})</text>
				<view class="line"></view>
			</view>
			<view :class="['smallMenu',secondMenu == '1'?'active2':'']" @tap.stop='changeSecondMenu(1)'>
				<text>已下单({{haveDown}})</text>
				<view class="line"></view>
			</view>
			<view :class="['smallMenu',secondMenu == '2'?'active2':'']" @tap.stop='changeSecondMenu(2)'>
				<text>已完成({{haveGet}})</text>
				<view class="line"></view>
			</view>
		</view>
		<view class="list" v-if="list.length">
			<view class="line" v-for="(item,index) in list" :key='index'>
				<view class="userInfo dFlex jBetween_aCenter">
					<view class="user dFlex jStart_aCenter">
						<view class="userTx imgPublic">
							<image :src="item.avatar" mode="widthFix"></image>
						</view> 
						<text>{{item.nickname}}</text>
					</view>
					<view class="xia" v-if="secondMenu == '0'">喊TA下单</view>
				</view>
				<view class="progress">
					<view class="lineOne dFlex jStart_aStart">
						<view class="lineIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/pro1.png" mode="widthFix"></image>
						</view>
						<text>{{item.createtime}}通过分享进入小程序</text>
					</view>
					<view class="lineOne dFlex jStart_aStart" v-if="secondMenu == '0'">
						<view class="lineIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/pro2.png" mode="widthFix"></image>
						</view>
						<text>成功邀请，{{need_num}}人下单并成功收货，即免单</text>
					</view>
					<view class="lineOne dFlex jStart_aStart" v-if="secondMenu == '1' || secondMenu == '2'" @tap.stop='copyNum(item.orderNo)'>
						<view class="lineIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/pro1.png" mode="widthFix"></image>
						</view>
						<text>{{item.down_time}}成功下单，订单编号：{{item.orderNo}} 点击单号自动复制</text>
					</view> 
					<view class="lineOne dFlex jStart_aStart" v-if="secondMenu == '2'">
						<view class="lineIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/pro1.png" mode="widthFix"></image>
						</view>
						<text>{{item.get_time}}成功收货</text>
					</view> 
				</view>
			</view>
		</view>
		<view class="list empty imgPublic" v-else>
			<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				secondMenu: '0',
				shopId: '',
				invitedId: '',

				notDown: 0, //待下单
				haveDown: 0, //已下单
				haveGet: 0, //已收货
				list: [],
				list1:[],
				list2:[],
				list3:[],
				need_num:'',
			};
		},
		onLoad(e) {
			this.shopId = e.id;
			this.invitedId = e.invitedId;
			this.initData();
		},
		methods: {
			initData() {
				this.tool.getData('/api/mall/getInviteInfo', {
					invite_id: this.invitedId,
					goods_id: this.shopId
				}).then(res => {
					if (res) {
						this.need_num = res.inviteInfo.need_num;
						res.logList.map((item, index) => {
							item.createtime = this.tool.timestampToTime(item.createtime * 1000, 1);
							item.down_time = item.down_time > 0 ? this.tool.timestampToTime(item
								.down_time * 1000, 1) : '';
							item.get_time = item.get_time > 0 ? this.tool.timestampToTime(item.get_time *
								1000, 1) : '';
							if (item.is_down == '0') { //待下单
								this.notDown++;
								this.list1.push(item);
								this.list = this.list1;
							} else if (item.is_down == '1' && item.is_get == '') { //已下单
								this.haveDown++;
								this.list2.push(item);
							} else if (item.is_down == '1' && item.is_get == '1') { //已完成
								this.haveGet++;
								this.list3.push(item);
							}

						})
						this.datas = res;
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 二级菜单
			changeSecondMenu(idx){
				this.secondMenu = idx;
				if(idx == '0'){
					this.list = this.list1;
				}else if(idx == '1'){
					this.list = this.list2;
				}else if(idx == '2'){
					this.list = this.list3;
				}
				/* this.notDown = 0;
				this.haveDown = 0;
				this.haveGet = 0;
				this.list = [];
				this.initData(); */
			},
			// 复制单号
			copyNum(num){
				uni.setClipboardData({
					data:num,
					success() {
						uni.showToast({
							title:"已复制单号",
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F4F4;
	}

	.record {
		width: 100%;

		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;

			.line {
				width: 100%;
				padding: 30rpx 24rpx 0;
				background: white;
				margin-bottom: 20rpx;
				border-radius: 24rpx;

				.progress {
					width: 100%;
					font-size: 13px;
					color: #666666;
					overflow: hidden;

					.lineOne {
						width: 100%;
						margin-bottom: 24rpx;
						text{
							display: inline-block;
							flex: 1;
						}
						.lineIcon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 8rpx;
						}
					}
				}

				.userInfo {
					width: 100%;
					margin-bottom: 12px;
					.user {
						flex: 2;
						font-size: 18px;
						font-weight: 500;

						.userTx {
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
							margin-right: 16rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
					}

					.xia {
						width: max-content;
						color: white;
						border-radius: 50px;
						padding: 6rpx 16rpx;
						background: #FC3C11;
					}
				}
			}
		}

		.menuSecond {
			width: 100%;
			background: white;

			.smallMenu {
				flex: 1;
				padding-top: 28rpx;
				font-size: 16px;
				text-align: center;

				.line {
					width: 48rpx;
					height: 8rpx;
					border-radius: 50px;
					background: white;
					margin: 10rpx auto 0;
				}
			}

			.active2 {
				color: #9D1E04;

				.line {
					background: #9D1E04;
				}
			}
		}
	}
</style>